<template>
	<div class="header">
		<div class="asidetop">
			<p v-bind:class="{ 'logo':img , 'logo1':img1}">
				WeChat
			</p>
			<el-menu class="btn">
				<i class="icon iconfont icon-liebiaoshitucaidan" @click="show()"></i>
			</el-menu>
		</div>
	</div>
</template>

<script>
	import emitt from './emit'
	export default{
		name:"tapBar",
		data(){
			return{
				img: true,//展开
				img1: false,//收缩
				isCollapse: false,//传值
			}
		},
		methods:{
			//显示隐藏
			show: function() {
				this.img = !this.img
				this.img1 = !this.img1
				this.isCollapse = !this.isCollapse //传值给sidebar
				emitt.$emit("toggle", this.isCollapse) //通过emit
			},
		}
	}
</script>

<style>
	.header{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		height: 60px;
		width: 100%;
		background-color: #564aa3;
	}
	.logo {
		width: 200px;
		text-align: center;
		float: left;
		height: 60px;
		box-sizing: border-box;
		transition: all 0.3s;
		line-height: 60px;
		color: #fff;
	}
	
	.logo1 {
		width: 64px;
		text-align: center;
		float: left;
		height: 60px;
		/*padding-top: 8px;*/
		box-sizing: border-box;
		transition: all 0.3s;
		line-height: 60px;
		color: #fff;
	}
	.btn {
		width: 28px;
		height: 28px;
		float: left;
		background-color: #564aa3;
		color: #fff;
		font-size: 20px !important;
		margin-top: 16px !important;
		border:none; 
	}
	.btn .iconfont {
		font-size: 30px !important;
	}
</style>